<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	<style type="text/css">
				#sid1{
					width: 300px;
					height: 300px;
					background-color: blue;
				}
			</style>
		</head>
		<body>
			<div id="sid1" onmouseenter="museenterdiv();" onmouseleave="museenteleavediv();" onmousemove="divmousemonve();">
				
			</div>
		</body>
		<script type="text/javascript">
			//2. 300px*300px的DIV 进入事件，离开事件，移动事件（三种绑定方式）
		//1	
			function museenterdiv(){
				console.log('你进入了元素')
			}
	
			function museenteleavediv(){
				console.log('你离开了元素')
			}
			function divmousemonve(){
				console.log('你在div中移动')
			}
			//2
			document.getElementById('sid1').onmouseenter=museenterdiv;
			document.getElementById('sid1').onmouseleave=museenteleavediv;
			document.getElementById('sid1').onmousemove=divmousemonve;
			
			//3
			document.getElementById('sid1').addEventListener('mouseenter',museenterdiv);
			document.getElementById('sid1').addEventListener('mouseleave',museenteleavediv);
			document.getElementById('sid1').addEventListener('mousemove',divmousemonve);
		</script>
</html>
